出处：掘金

原作者：我是区块链小学生

嘿，大家好！今天咱们来聊聊 Next.js 里一个挺核心但听起来有点玄乎的概念 —— 水合（Hydration）。如果你用过 Next.js，估计对这个词不陌生，但它到底是啥？为啥这么重要？别急，咱慢慢掰扯清楚，保准让你看完后心里亮堂堂的！

技术背景：Next.js 和 SSR/SSG 的那些事儿

先说说背景，Next.js 是个超级火的 React 框架，最大的卖点就是能轻松搞定服务器端渲染（SSR）和静态站点生成（SSG）。为啥要整这些？简单来说，传统的 React 应用（也就是纯客户端渲染，CSR）是先把一个空壳 HTML 扔给浏览器，然后靠 JavaScript 在浏览器里把页面内容“画”出来。这虽然灵活，但有两个问题：

1. 首屏加载慢：用户得等 JavaScript 加载完、执行完，才能看到页面内容
2. SEO 不友好：搜索引擎爬虫看到的是空 HTML，抓不到啥有用的内容

Next.js 站出来说：“我来解决！”通过 SSR 或 SSG，Next.js 能在服务器上把页面渲染好，生成完整的 HTML，直接发给浏览器。这样用户能秒看到内容，搜索引擎也能开心地抓到数据。听起来很美对吧？但这时候，JavaScript 咋办？页面送过去是静态的 HTML，咋让它“活”起来，响应用户的点击、输入啥的？这就得靠水合了！

名词解释：水合到底是啥？

“水合”这个词听起来像化学实验，其实在 Next.js 里，它是个很形象的说法。想象一下，服务器送来的 HTML 就像一块干巴巴的海绵，里面有页面的结构和内容，但它还不会“动”。水合就是把这块干海绵泡进水里，让它吸饱 React 的 JavaScript “水分”，变成一个能互动的、活生生的 React 应用

具体点说，水合是 Next.js（或者 React）在浏览器端把服务器渲染的静态 HTML 跟 React 组件“绑定”起来的过程。服务器送来的 HTML 是死的，React 通过水合给它注入灵魂，让页面能响应用户操作，比如点击按钮、切换 Tab 啥的

实现原理：水合咋干的？

好了，来说说水合咋实现的。别怕，咱用大白话讲，尽量不整那些让人犯困的技术术语

1 . 服务器干活

你用 Next.js 的 getServerSideProps（SSR）或者 getStaticProps（SSG）写页面逻辑，服务器会先把页面渲染成 HTML。这 HTML 包含了页面的完整 DOM 结构和初始数据（比如从 API 拉来的列表数据）

这时候，Next.js 还会把页面的初始状态（props）序列化成 JSON，塞进一个叫 __NEXT_DATA__ 的 script 标签里，一起发给浏览器

2 . 浏览器接手

浏览器收到 HTML 后，先展示出来，用户立马能看到内容（这叫首屏渲染）。与此同时，Next.js 的 JavaScript（也就是 React 代码）开始加载。加载完后，React 会干啥？它会读取 __NEXT_DATA__ 里的 JSON 数据，用来初始化 React 组件树

3 . 水合过程

React 会把服务器送来的 HTML 结构跟自己的虚拟 DOM 对比一遍，确认没啥问题后，就把事件监听器（比如 onClick、onChange）“挂”到对应的 DOM 节点上。这个过程就像给 HTML 装上“遥控器”，让它能响应用户的操作。完成之后，页面就从静态的 HTML 变成了一个动态的 React 应用

注意事项

水合有个关键点：服务器和客户端渲染的 HTML 必须一致。如果不一致（比如服务器少渲染了个 div，或者客户端代码改了结构），React 会报错，提示“水合失败”（hydration mismatch）。这也是开发 Next.js 时常踩的坑，后面会讲咋避免

SSR Hydration 不匹配问题工程化治理方案

应用实例：水合在哪儿发挥作用？

好了，讲了这么多原理，咱们来看看水合在实际开发里咋用。以下是几个常见的场景：

博客网站（SSG + 水合）

假设你用 Next.js 搭了个博客，文章页用 getStaticProps 生成静态 HTML。用户访问文章页时，浏览器立马显示服务器渲染好的文章内容（标题、正文、图片啥的）。与此同时，React 在后台加载并水合，页面“活”过来后，用户就能点“喜欢”按钮、评论啥的了。这就是水合的典型应用：首屏快如闪电，交互丝滑如初

电商网站（SSR + 水合）

想象一个电商首页，商品列表通过 getServerSideProps 从服务器拉数据，渲染成 HTML。用户打开页面，立马看到商品卡片、价格啥的。React 加载完后，水合让页面支持交互，比如点击“加入购物车”会触发状态更新，页面动态刷新。水合保证了服务器和客户端的无缝衔接

动态表单

有个表单页面，服务器渲染出初始的输入框和按钮。用户看到页面后，React 水合让表单支持输入验证、动态提示等功能。比如你输入邮箱，React 会实时校验格式，给你个绿勾或红叉

避坑指南：水合常见问题咋整？

水合虽然好用，但开发时容易踩坑。以下是几个常见问题和解决办法

水合不匹配（Hydration Mismatch）

为啥会不匹配？可能是服务器和客户端渲染的 HTML 不一样。比如：

• 用了 if (typeof window === undefined)
• 用了 Date.now() 或 Math.random()

解决办法：

• 确保服务器和客户端逻辑一致，动态内容放 useEffect 里（只在客户端跑）
• 用 Next.js 的 dynamic 导入动态加载纯客户端组件，跳过服务器渲染

水合太慢

如果 JavaScript 文件太大，加载和水合会拖慢页面交互

解决办法：

• 优化 JavaScript 包体积，用 Next.js 的动态导入（next/dynamic）按需加载组件
• 用 next/script 优化第三方脚本加载

SEO 和水合的平衡

水合是为了交互，但过度依赖客户端逻辑可能让 SEO 变差

解决办法：

• 尽量把核心内容放服务器渲染，客户端只处理交互逻辑
• 用 next/head 优化 SEO 元数据

总结：水合的魅力

水合是 Next.js 的杀手锏之一，它让服务器渲染的静态页面“活”过来，既保证了首屏加载的快，又保留了 React 的动态交互能力。理解水合的原理，能帮你更好地用 Next.js 开发出高性能、SEO 友好的 Web 应用

简单总结下：

• 水合干啥：把服务器渲染的 HTML 变成动态 React 应用
• 咋实现的：服务器送 HTML+JSON，客户端加载 React 后绑定事件
• 用在哪儿：需要快速首屏渲染、SEO
• 咋用好：避免不匹配，优化加载速度，平衡 SEO 和交互